<template>
	<sl-page title="收藏">
		<z-paging ref="paging"  v-model="collectionList"
			@query="loadPage">
			<view class="list" :style="{'margin-top':CustomBar + 'px'}">
				<view class="list_detail" v-for="(item,index) in collectionList">
					<view class="collection">
						<view class="collection-body">
							<view class="body-goods-image">
								<sl-image :value="item.productImage"></sl-image>
							</view>
							<view class="">
								<view class="">{{ item.productName }}</view>
								<view class="py-1">
									<Money :priceValue="item.productPrice" :activeClass="['money-price']"></Money>
								</view>
							</view>
						</view>
						<view class="flex flex-x-end" @click="toTargetGoods(item.productId)">
							<view class="collection-button" >
								进入店铺
							</view>
						</view>
					</view>
				</view>
			</view>
		</z-paging>
	</sl-page>
</template>

<script>
	import GoodsApi from '@/api/goods/goods.js';
	import Money from '@/pages/components/money/money.vue';
	import Constants from '@/constants';
	//
	export default {
		//
		name: 'collection',
		//
		mixins: [Constants],
		//
		components: {
			Money
		},
		//
		data() {
			return {
				collectionList: [],
				CustomBar:0
			};
		},
		//
		onLoad(options) {
			this.options = options;
			let custom = uni.getMenuButtonBoundingClientRect();
			this.CustomBar = custom.bottom + custom.top - this.StatusBar +10;
		},
		//
		methods: {
			//获取收藏
			loadPage: async function() {
				try {
					let res = await await GoodsApi.products();
					console.log('【获取收藏数据】:', res.obj);
					this.$refs.paging.complete(res.obj.data);
				} catch (error) {
					console.error('【获取收藏失败】:', error);
					this.$refs.paging.complete(false);
				}
			},
			//跳转到商品
			toTargetGoods(goodsId) {
				this.$app.navTo(this.pages.goodsDetailPage, {
					goodsId
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.list {
		display: flex;
		flex-direction: column;
	
		.list_detail {
			background: $uni-bg-color;
			padding: $xj-standard-padding;
			border-radius: $xj-standard-border-radius;
			margin-bottom: 12rpx;
		}
	}
	.collection {
		font-size: $uni-font-size-base;
		display: flex;
		flex-direction: column;

		.collection-body {
			display: flex;

			.body-goods-image {
				position: relative;
				width: 128rpx;
				height: 128rpx;
				overflow: hidden;
				border: 2rpx solid #CCCCCC;
				margin-right: 34rpx;
				border-radius: 12rpx;
			}
		}

		.collection-button {
			display: flex;
			font-size: $uni-font-size-base;
			justify-content: center;
			display: inline-flex;
			height: 26px;
			padding: 12px 16px;
			justify-content: center;
			align-items: center;
			gap: 10px;
			flex-shrink: 0;
			border-radius: 38px;
			border: 0.5px solid #F7441D;
			color: rgba(247, 68, 29, 1);
		}
	}
</style>